//1.搜索页面的功能
var categories;
//一级分类的点击事件
$('.wrapper').on('click', '.first a', function () {
    $('.first .active').removeClass("active");
    $(this).addClass("active");

    //获取被点击的一级分类的ID
    var firstCategory = $(this).attr('data-id');
    categoryId = firstCategory;
    if (firstCategory) {
        //点击的是某个一级分类
        //显示二级分类
        loadSecondCategory(firstCategory, categories);
    } else {
        //点击的是全部
        $('.wrapper .second').empty();
    }

    loadGoods(firstCategory, key);
});
//二级分类的点击事件
$('.wrapper').on('click', '.second a', function () {
    $('.second .active').removeClass("active");
    $(this).addClass("active");
    //获取被点击的一级分类的ID
    var secondCategory = $(this).attr('data-id');
    categoryId = secondCategory;
    if (!secondCategory) {
        secondCategory = $('.first .active').attr('data-id');
    }
    loadGoods(secondCategory, key);
});

//商品图片点击事件
//事件冒泡
$('.goods').on('click', '.thumbs img', function () {
    var src = $(this).attr('src');
    $(this).parents('a').find('.img img').attr('src', src);
    //阻止事件的冒泡
    return false;
});

//分页的点击事件
$('.pages').on('click', 'a', function () {
    var page = $(this).attr('data-page');
    if (page) {
        loadGoods(categoryId, key, page);
    }
});


//展示分类
function loadFirstCategory(selectedId) {
    obajax.get(
        'api/category',
        {parentId: 0},//只要一级分类
        (result) => {
            categories = result.data;
            var html =
                '            <div class="sch-key">一级分类：</div>\n' +
                '            <div class="sch-value clearfix"><a href="javascript:;">全部</a>';

            $.each(result.data, (index, item) => {
                html += '<a href="javascript:;" data-id="' + item.id + '">' + item.name + '</a>';
            });
            html += '</div></div>';

            //获取一级分类
            if (selectedId) {
                html += '';
                $('.wrapper .first').html(html);

                //获取一级分类
                var firstCategoryId = getFirstCategory(selectedId, result.data);
                //选中一级分类
                $('.wrapper .sch-prop [data-id="' + firstCategoryId + '"]').addClass("active");
                //显示二级分类
                loadSecondCategory(selectedId, result.data);
            } else {
                $('.wrapper .first').html(html);
                $('.wrapper .sch-prop a:first').addClass("active");
            }
        },
    );
}

//加载二级分类
function loadSecondCategory(categoryId, categories) {
    //取出要 显示二级分类
    var secondCategories = null;
    var isSecond = false;
    $.each(categories, (index, first) => {
        if (first.id == categoryId) {
            secondCategories = first.children;
            return false;
        } else {
            $.each(first.children, (index, second) => {
                if (second.id == categoryId) {
                    secondCategories = first.children;
                    isSecond = true; //当前分类是一个二级分类
                    return false;
                }
            });
        }
    })
    //显示二级分类
    var html =
        '            <div class="sch-key">二级分类：</div>\n' +
        '            <div class="sch-value clearfix"><a href="javascript:;">全部</a>';
    $.each(secondCategories, (index, item) => {
        html += '<a href="javascript:;" data-id="' + item.id + '">' + item.name + '</a>';
    });
    html += '</div></div>';
    $('.wrapper .second').html(html);

    if (isSecond) {
        $('.wrapper .second a[data-id="' + categoryId + '"]').addClass("active");
    } else {
        $('.wrapper .second a:first').addClass("active");
    }
}


function getFirstCategory(categoryId, categories) {
    $.each(categories, (index, item) => {
        //判断
        if (categoryId == item.id) {
            return false; //结束循环
        } else {
            $.each(item.children, (index, item) => {
                if (categoryId == item.id) {
                    //当前category是一个二级分类
                    categoryId = item.parent_id;
                    return false;
                }
            })
        }
    })
    return categoryId;
}

//展示商品
function loadGoods(categoryId, key, page, limit) {
    if (!page) {
        page = 1;
    }
    if (!limit) {
        limit = 6;
    }
    //获取筛选条件
    var where = {categoryId, name: key, page, limit};

    //ajax
    obajax.get(
        '/api/goods',
        where,
        (result) => {
            var html = '';
            $.each(result.data.list, (index, item) => {
                html +=
                    '                <div class="col col-3">\n' +
                    '                    <div class="item">\n' +
                    '                        <div class="inner">\n' +
                    '                            <a href="/goods?id=' + item.id + '"><img class="figure" src="/upload/' + item.pics[0].url + '" alt=""/></a>\n' +
                    '                            <a href="/goods?id=' + item.id + '">\n' +
                    '                                <div class="name">' + item.name + '</div>\n' +
                    '                                <div class="price">' + item.price + '元</div>\n' +
                    '                            </a>\n' +
                    '                            <a class="act" href=""><i class="iconfont icon-cart"></i>加入购物车</a>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                </div>';

            });
            $('.sg-content .sg-list').html(html);

            //渲染分页
            renderPage(result.data);
        }
    )
}

function renderPage(pageInfo) {
    var html = '';
    if (pageInfo.hasPreviousPage) {
        html += '<a class="page prev" href="javascript:;" data-page="' + pageInfo.prePage + '">上一页</a>';
    } else {
        html += '<a class="page prev disable1" href="javascript:;">上一页</a>';
    }

    $.each(pageInfo.navigatepageNums, (index, num) => {
        if (num == pageInfo.pageNum) {
            html += '<a class="page cur-page" href="javascript:;">' + num + '</a>';
        } else {
            html += '<a class="page" href="javascript:;" data-page="' + num + '">' + num + '</a>';
        }
    })

    if (pageInfo.hasNextPage) {
        html += '<a class="page next" href="javascript:;"  data-page="' + pageInfo.nextPage + '">下一页</a>';
    } else {
        html += '<a class="page next disable1" href="javascript:;">下一页</a>';
    }
    $('.pages').html(html);
}